<template>
  <div id="helpWang">
      <h2>猪脚管理</h2>
      <div id="echartBox" style="width: 800px; height: 400px"></div>
 </div>
</template>

<script>
// import echarts from 'echarts'
var echarts = require('echarts')
export default {
  name: '',
  data() { 
    return {

    }
  },
  created() {
      
  },
  mounted() {
      var myEcharts = echarts.init(document.getElementById('echartBox'))
      var option = option = {
        //   title表示图标的标题
            title: {
                text: '猪脚管理图'
            },
            // 鼠标放在对应的数据上给的提示方法
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['理论成绩', '机试成绩']
            },
            
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['刘永清', '任俊臣', '宋忠义', '党发亮', '刘磊', '洋盘', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '理论成绩',
                    type: 'pie',
                    stack: '总量',
                    areaStyle: {},
                    data: [20, 30, 50, 70, 90, 100, 0]
                },
                {
                    name: '机试成绩',
                    type: 'pie',
                    stack: '总量',
                    areaStyle: {},
                    data: [0, 10, 30, 50, 70, 90, 100]
                }
            ]
        };

        myEcharts.setOption(option)
  },
  methods:{

  },
 }
</script>

<style scoped>
#helpWang{
    height: 100%;
}
</style>